<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="24" :xs="24">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="任务名称">
            <el-input v-model="queryParams.name" placeholder="任务名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-video-play" size="mini" :disabled="single" :loading="runloading"
            @click="handleRun">查看日志</el-button>
        </el-col>
      </el-col>
      <el-col :span="24" :xs="24">
        <el-table v-loading="listLoading" :header-cell-class-name="headerCellStyle" ref="singleTable"
          @selection-change="handleSelectionChange" @select="selectChange" filter-multiple="" :data="list"
          style="width: 100%;">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column align="center" label="id" width="240">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="任务">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="jobId" width="240" align="center">
            <template slot-scope="scope">
              {{ scope.row.jobId }}
            </template>
          </el-table-column>
          <el-table-column label="时间" width="215" align="center">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>
    <log-file-read ref="logfile" ></log-file-read>
  </div>
</template>

<script>
// options components
import logFileRead from '@/views/oggex/logFileRead'
import pagination from '@/components/Pagination'
import { listLog } from '@/api/ogg'
export default {
  name: 'ComplxLog',
  components: { logFileRead, pagination },
  data() {
    return {
      list: null,
      listLoading: false,
      isfile: false,
      runloading: false,
      total: 0,
      ids: [],
      single: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    querySearch() {
      this.queryParams.pageNum = 1;
      this.getList()
    },
    getList() {
      this.listLoading = true;
      listLog(this.queryParams).then(res => {
        this.list = res.rows;
        this.total = res.total
      }).finally(() => {
        this.listLoading = false;
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
    }
    , selectChange(selection) {
      if (selection.length > 1) {
        const del_row = selection.shift();
        this.$refs.singleTable.toggleRowSelection(del_row, false);
      }
    },
    handleRun() {
      this.$refs.logfile.loadIdFile(this.ids[0])
    },
    headerCellStyle({ column, columnIndex }) {
      if (columnIndex === 0) {
        return 'hiddenCheck'
      }
    }
  }
}
</script>

<style lang="scss"  scoped>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}

.el-table {
  ::v-deep .hiddenCheck {
    .cell {
      visibility: hidden;
    }
  }
}
</style>
